<template>
    <div>
        <van-nav-bar
            title="Train"
            left-arrow
            @click-left="onClickLeft"
        />
        <div class="select-bar">
            <div :class="['plan',{'selectPlan':selectPlan}]" @click="clickPlan">
                <span>Plan</span>
                <div
                    class="red-line"
                    :style="{'transform':`translateX(${linePosition})`,'transition-duration':'0.3s'}"
                ></div>
            </div>
            <div :class="['all',{'selectAll':selectAll}]" @click="clickAll">All</div>
            <div :class="['favo',{'selectFavo':selectFavo}]" @click="clickFavo">Favourites</div>
        </div>
        <transition name="show-plan">
        <train-plan v-if="showPlan"></train-plan>
        </transition>
        <transition name="show-favo">
        <train-all v-if="showAll"></train-all>
        </transition>
        <transition name="show-favo">
        <train-favo v-if="showFavo"></train-favo>
        </transition>
    </div>
</template>
<script>
    import trainPlan from '../../components/TrainPlan'
    import trainAll from '../../components/TrainAll'
    import trainFavo from '../../components/TrainFavo'
    export default {
        data() {
            return {
                linePosition: '0',
                selectPlan: true,
                selectAll: false,
                selectFavo: false,
                showPlan:true,
                showAll:false,
                showFavo:false,
            }
        },
        methods: {
            onClickLeft() {
                this.$router.go(-1)
            },
            clickPlan() {
                this.linePosition = '0'
                this.selectPlan = true
                this.selectAll = false
                this.selectFavo = false
                this.showPlan=true
                this.showAll=false
                this.showFavo=false
            },
            clickAll() {
                this.linePosition = '100%'
                this.selectPlan = false
                this.selectAll = true
                this.selectFavo = false
                this.showPlan=false
                this.showAll=true
                this.showFavo=false
            },
            clickFavo() {
                this.linePosition = '200%'
                this.selectPlan = false
                this.selectAll = false
                this.selectFavo = true
                this.showPlan=false
                this.showAll=false
                this.showFavo=true
            }
        },
        components:{
            trainPlan,
            trainAll,
            trainFavo,
        },
    }

</script>
<style scoped>
    .select-bar {
        display: flex;
    }

    .select-bar .plan {
        text-align: center;
        line-height: 30px;
        flex: 1;
        border-right: solid 1px black;
        position: relative;
    }

    .select-bar .plan .red-line {
        position: absolute;
        left: 0;
        top: 100%;
        width: 100%;
        border: solid #F29D38 1px;
    }

    .select-bar .all {
        text-align: center;
        line-height: 30px;
        flex: 1;
        border-right: solid 1px black;
    }

    .select-bar .favo {
        text-align: center;
        line-height: 30px;
        flex: 1;
    }

    .selectPlan, .selectAll, .selectFavo {
        color: #F29D38;
    }




    /*控制plan的过渡*/
    .show-plan-enter,.show-plan-leave-to{
        transform: translateX(-100%);
    }
    .show-plan-enter-active{
        transition: all .3s ease;
    }
    .show-plan-enter-to,.show-plan-leave-to {
        transform: translateX(0);
    }
    /*控制favo的过渡*/
    .show-favo-enter,.show-favo-leave-to{
        transform: translateX(100%);
    }
    .show-favo-enter-active{
        transition: all .3s ease;
    }
    .show-favo-enter-to,.show-favo-leave-to {
        transform: translateX(0);
    }

</style>
